import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { Result, Button, Card, Descriptions, Spin } from 'antd';
import { CheckCircleOutlined, HomeOutlined, BookOutlined } from '@ant-design/icons';
import styles from './PaymentSuccess.module.css';

const PaymentSuccess = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [orderInfo, setOrderInfo] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 从URL参数中获取订单信息
    const outTradeNo = searchParams.get('out_trade_no');
    const tradeNo = searchParams.get('trade_no');
    const totalAmount = searchParams.get('total_amount');
    
    if (outTradeNo) {
      // 这里可以调用API获取订单详情
      setOrderInfo({
        orderId: outTradeNo,
        tradeNo: tradeNo,
        totalAmount: totalAmount,
        payTime: new Date().toLocaleString()
      });
    }
    
    setLoading(false);
  }, [searchParams]);

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoBooks = () => {
    navigate('/books');
  };

  if (loading) {
    return (
      <div className={styles.loadingContainer}>
        <Spin size="large" />
        <p>正在处理支付结果...</p>
      </div>
    );
  }

  return (
    <div className={styles.paymentSuccess}>
      <Card className={styles.successCard}>
        <Result
          status="success"
          icon={<CheckCircleOutlined />}
          title="支付成功！"
          subTitle="您的图书购买订单已支付成功，感谢您的购买！"
          extra={[
            <Button 
              type="primary" 
              key="home" 
              icon={<HomeOutlined />}
              onClick={handleGoHome}
            >
              返回首页
            </Button>,
            <Button 
              key="books" 
              icon={<BookOutlined />}
              onClick={handleGoBooks}
            >
              继续购买
            </Button>
          ]}
        />
        
        {orderInfo && (
          <div className={styles.orderInfo}>
            <h3>订单信息</h3>
            <Descriptions bordered column={2}>
              <Descriptions.Item label="订单号">
                {orderInfo.orderId}
              </Descriptions.Item>
              <Descriptions.Item label="支付宝交易号">
                {orderInfo.tradeNo || '暂无'}
              </Descriptions.Item>
              <Descriptions.Item label="支付金额">
                ¥{orderInfo.totalAmount || '0.00'}
              </Descriptions.Item>
              <Descriptions.Item label="支付时间">
                {orderInfo.payTime}
              </Descriptions.Item>
            </Descriptions>
          </div>
        )}
      </Card>
    </div>
  );
};

export default PaymentSuccess; 